<template>
    <div class="image-component" :style="style">
        <img v-if="!mode" :src="src" alt="" :style="imgStyle">
    </div>
</template>

<script>
    export default {
        name: 'LImage',
        props: {
            mode: {
                type: String,
                default: 'cover'
            },
            position: {
                type: String,
                default: 'center center'
            },
            src: String,
            imgStyle: String,
            alt: String,
            width: String,
            height: String
        },
        data() {
            return {}
        },
        computed: {
            style() {
                const {width, height, position} = this
                let obj = {
                    width,
                    height,
                }
                if (this.mode === 'cover') {
                    if (!width) {
                        obj.width = `100%`
                    }
                    obj.backgroundImage = `url(${this.src})`
                    obj.backgroundPosition = `${position}`
                }
                return obj
            }
        },
        components: {},
        created() {
        },
        methods: {},
    }
</script>

<style lang="scss" scoped>
    .image-component {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;

        img {
            display: block;
            max-width: 100%;
        }
    }
</style>
